<script setup lang="ts">
import { reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'

interface property {
  valArr: any
  row: any
  col: any
  size: any
  num: any
  isChange: boolean
  current: number
  land: string
  round: any
  comp: Record<string, string>
  invar: Record<string, string>
}

// 获取url 的 id
let id: any = useRoute().query.id

id = parseInt(id)

const { push } = useRouter()

onMounted(() => {
  const val = localStorage.getItem('val_list')

  if (val) {
    af.valArr = JSON.parse(val)
    af.row = temp(af.valArr.row)

    // 动态样式
    af.comp = {
      width: af.valArr.size + 'px',
      height: af.valArr.size + 'px',
      lineHeight: af.valArr.size + 'px',
      fontSize: af.valArr.size / 4 + 'px'
    }

    switch (id) {
      case 0:
        af.size = 100
        renderDom((af.row = 9), 1)
        break
      case 1:
        af.size = 80
        renderDom((af.row = 20), 3)
        break
      case 2:
        af.size = 50
        renderDom((af.row = 81), 6)
        break
      default:
        renderDom()
    }
  }
})

const af = reactive<property>({
  valArr: [],
  row: 1,
  col: 3,
  size: 1,
  num: 1,
  isChange: false,
  current: 0,
  land: 'https://wimg.588ku.com/gif620/20/07/06/16181476c32d1262a0d77a16ba9e4357.gif',
  round: [],
  comp: {},
  invar: {}
})

function temp(data: number) {
  return Array.from({ length: data }, (_, i) => i + 1)
}

// 渲染 地雷随机数 和 动态样式
function renderDom(row?: number, num?: number): void {
  const min = 1
  let arr: number[] = []
  // 遍历出 n 个 随机数
  Array.from({ length: id === 3 ? af.valArr.num : num }, () => {
    let n = Math.floor(Math.random() * (id === 3 ? af.valArr.row : row) + min)
    if (!arr.includes(n)) {
      arr.push(n)
    }
  })

  af.round = arr

  console.log('地雷编号', arr)

  // 固定样式
  af.invar = {
    width: af.size + 'px',
    height: af.size + 'px',
    lineHeight: af.size + 'px',
    fontSize: af.size / 4 + 'px'
  }
}

// 随机数 中 如果 有 包含索引
const round = computed(() => af.round.includes(af.current + 1))

// 点击开始游戏
const changeCard = (e: any) => {
  af.current = e
  af.isChange = !af.isChange

  over(af.current, e)
}

const changeCard_ = (e: number) => {
  af.current = e
  over(af.current, e)
}

// 点击炸弹后游戏结束 
function over(cur: number, e: number) {
  if (cur === e && Object.values(af.round).includes(e + 1)) {
    const hide = message.loading('游戏结束,跳转到首页', 0)
    setTimeout(hide, 1800)
    setTimeout(() => push('/about'), 2000)
  }
}

</script>
<template>
  <div class="main">
    <template v-if="id === 0">
      <div
        class="game"
        :style="{
          width: (af.row / 3) * af.size + 40 + 'px'
        }"
      >
        <!-- 正面内容 -->
        <span
          v-if="!af.isChange"
          class="front bg"
          v-for="(item, index) in af.row"
          @click="changeCard(index)"
          :key="item"
          :style="af.invar"
        >
          <span v-if="af.current !== index">{{ item }}</span>
        </span>
        <!-- 反面内容 -->
        <span
          v-if="af.isChange"
          class="front pin"
          v-for="(item, index) in af.row"
          :key="item"
          @click="changeCard_(index)"
          :class="[af.current === index && !round ? 'pin' : 'wh']"
          :style="af.invar"
        >
          <!-- current 等于 当前的索引 且 选出 包含 地雷的 -->
          <template v-if="af.current === index && round">
            <img :src="af.land" />
          </template>
          <span v-if="af.current !== index">{{ item }}</span>
        </span>
      </div>
    </template>
    <template v-if="id === 1">
      <div
        class="game"
        :style="{
          width: (af.row / 3) * af.size + 40 + 'px'
        }"
      >
        <!-- 正面内容 -->
        <span
          v-if="!af.isChange"
          class="front bg"
          v-for="(item, index) in af.row"
          @click="changeCard(index)"
          :key="item"
          :style="af.invar"
        >
          <span v-if="af.current !== index">{{ item }}</span>
        </span>
        <!-- 反面内容 -->
        <span
          v-if="af.isChange"
          class="front pin"
          v-for="(item, index) in af.row"
          :key="item"
          @click="changeCard_(index)"
          :class="[af.current === index && !round ? 'pin' : 'wh']"
          :style="af.invar"
        >
          <!-- current 等于 当前的索引 且 选出 包含 地雷的 -->
          <template v-if="af.current === index && round">
            <img :src="af.land" />
          </template>
          <span v-if="af.current !== index">{{ item }}</span>
        </span>
      </div>
    </template>
    <template v-if="id === 2">
      <div
        class="game"
        :style="{
          width: (af.row / 3) * af.size + 40 + 'px'
        }"
      >
        <!-- 正面内容 -->
        <span
          v-if="!af.isChange"
          class="front bg"
          v-for="(item, index) in af.row"
          @click="changeCard(index)"
          :key="item"
          :style="af.invar"
        >
          <span v-if="af.current !== index">{{ item }}</span>
        </span>
        <!-- 反面内容 -->
        <span
          v-if="af.isChange"
          class="front pin"
          v-for="(item, index) in af.row"
          :key="item"
          @click="changeCard_(index)"
          :class="[af.current === index && !round ? 'pin' : 'wh']"
          :style="af.invar"
        >
          <!-- current 等于 当前的索引 且 选出 包含 地雷的 -->
          <template v-if="af.current === index && round">
            <img :src="af.land" />
          </template>
          <span v-if="af.current !== index">{{ item }}</span>
        </span>
      </div>
    </template>
    <!-- 设置游戏参数页面  -->
    <template v-if="id === 3">
      <div
        class="game"
        :style="{
          width: (af.valArr.row / af.valArr.col) * af.valArr.size + 40 + 'px'
        }"
      >
        <!-- 正面内容 -->
        <span
          v-if="!af.isChange"
          class="front bg"
          v-for="(item, index) in af.row"
          @click="changeCard(index)"
          :key="item"
          :style="af.comp"
        >
          <span v-if="af.current !== index">{{ item }}</span>
        </span>
        <!-- 反面内容 -->
        <span
          v-if="af.isChange"
          class="front pin"
          v-for="(item, index) in af.row"
          :key="item"
          @click="changeCard_(index)"
          :class="[af.current === index && !round ? 'pin' : 'wh']"
          :style="af.comp"
        >
          <!-- current 等于 当前的索引 且 选出 包含 地雷的 -->
          <template v-if="af.current === index && round">
            <img :src="af.land" />
          </template>
          <span v-if="af.current !== index">{{ item }}</span>
        </span>
      </div>
    </template>
  </div>
</template>
<style scoped lang="scss">
.game {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  perspective: 1000px;
  /* .front .back {
    backface-visibility: hidden;
    transition: transform 0.6s ease;
  } */
  .front {
    margin: 5px;
    padding: 5px;
    text-align: center;
  }
}
.pin {
  background-image: linear-gradient(
    to right,
    #ff8177 0%,
    #ff867a 0%,
    #ff8c7f 21%,
    #f99185 52%,
    #cf556c 78%,
    #b12a5b 100%
  );
}

.wh {
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.bg {
  background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
</style>
